<template>
	<view class="">
		<Popup ref="timePopup" type="bottom" :safe-area="true" border-radius="10px 10px 0 0">
			<view class="timePopup" style="bottom: 51px;position: absolute;width: 100%;">
				<view class="header">
					{{title}}
				</view>
				<view class="content">
					<picker-view v-model="startTime" class="picker_view" @change="startChange">
						<picker-view-column>
							<view class="picker_item" v-for="(item,index) in startRange" :key="index">
								{{index >= 10 ? index : `0${index}`}}
							</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker_item">
								00
							</view>
						</picker-view-column>
					</picker-view>
					<view class="range" v-if="status == 'timeRange'">
						──	
					</view>
					<picker-view v-model="endTime" class="picker_view" @change="endChange" v-if="status == 'timeRange'">
						<picker-view-column>
							<view class="picker_item" v-for="(item,index) in startRange" :key="index">
								{{index >= 10 ? index : `0${index}`}}
							</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker_item">
								00
							</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="popupBottom">
					<view class="cancel" :style="cancelStyle" @click="close()">
						取消
					</view>
					<view class="submit" :style="submitStyle" @click="submit()">
						确认
					</view>
				</view>
			</view>
		</Popup>
	</view>
</template>

<script>
	import Popup from "./popup.vue";
	export default {
		components: {
			Popup
		},
		props: {
			// 选择器的类型,time为时间选择器,即09:00.timeRange为时间区间选择器,即09:00-18:00
			status: {
				type: String,
				default: "timeRange",
			},
			// 选择器的标题
			title: {
				type: String, 
				default: "请选择",
			},
			value: {
				type: String, // v-model绑定的值,例: 09:00-18:00
				default: "",
			},
			delimiter: {
				type: String, // v-model绑定的值的分隔符,即开始时间和结束时间的分隔符,例: - 
				default: "-",
			},
			// 取消按钮样式
			cancelStyle: {
				type: Object,
				default: () => {
					return {}
				}
			},
			// 确认按钮样式
			submitStyle: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data(){
			return {
				startTime: [9, 0], // 开始时间,存储的仅为序号, 默认为: 09:00
				endTime: [18, 0],// 结束时间,同上,默认为: 18:00
				startRange: [], // 小时00~23
				endRange: [], // 分钟00~59
			}
		},
		watch: {
			// 因为v-model绑定的值可能是异步的,会出现第一次赋值时组件接收不到
			value(newVal){
				if(newVal){
					if(this.status == 'timeRange'){
						let startVal = newVal.split(this.delimiter)[0];
						let endVal = newVal.split(this.delimiter)[1];
						this.startTime = startVal.split(":").map(elem=> Number(elem));
						this.endTime = endVal.split(":").map(elem=> Number(elem));
					}else{
						this.startTime = newVal.split(":").map(elem=> Number(elem));
					}
				}
			}
		},
		created() {
			for (let i = 0; i < 24; i++) {
				this.startRange[i] = i
			}
			for (let i = 0; i < 60; i++) {
				this.endRange[i] = i
			}
			if(this.value){
				// 处理v-model默认值
				if(this.status == 'timeRange'){
					let startVal = this.value.split(this.delimiter)[0];
					let endVal = this.value.split(this.delimiter)[1];
					this.startTime = startVal.split(":").map(elem=> Number(elem));
					this.endTime = endVal.split(":").map(elem=> Number(elem));
				}else{
					this.startTime = this.value.split(":").map(elem=> Number(elem));
				}
			}
		},
		methods: {
			// 打开弹窗
			open(){
				this.$refs.timePopup.open();
			},
			// 关闭弹窗
			close(){
				this.$refs.timePopup.close();
			},
			// 开始时间数据切换
			startChange(val){
				let values = val.detail.value
				// 开始时间不能大于结束时间
				if(values[0] >= this.endTime[0]){
					values[0] = this.endTime[0];
					if(values[1] >= this.endTime[1]){
						values[1] = this.endTime[1]
					}
				}
				this.startTime = values;
			},
			// 结束时间数据切换
			endChange(val){
				let values = val.detail.value
				// 结束时间不能大于开始时间
				if(values[0] <= this.startTime[0]){
					values[0] = this.startTime[0];
					if(values[1] <= this.startTime[1]){
						values[1] = this.startTime[1]
					}
				}
				this.endTime = values;
			},
			// 更新父组件v-model
			submit(){
				// 因为官方的picker-view选择绑定的值是picker-item的下标(即序号)
				// 而且是时间选择器(时、分),所以可以直接把选择的序号处理为值即可(小于10补0)
				let startVal = this.startTime.map(elem=> elem >= 10 ? elem : `0${elem}`).join(":");
				let endVal = this.endTime.map(elem=> elem >= 10 ? elem : `0${elem}`).join(":");
				let value = startVal;
				if(this.status == 'timeRange'){
					value = startVal + this.delimiter + endVal;
				}
				uni.$emit("checkTimes",value);
				this.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.timePopup{
		background: #fff;
		border-radius: 10rpx 10rpx 0 0;
		.header{
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
			border-bottom: solid 1px #dcdfe6;
		}
		.content{
			padding: 20rpx;
			height: 360rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.picker_view{
				width: 100%;
				height: 100%;
				.picker_item{
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.popupBottom{
			width: 100%;
			padding: 10rpx 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			view{
				width: 40%;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				font-size: 30rpx;
				&.cancel{
					border-radius: 40rpx 0 0 40rpx;
					background: #F1F1F1;
					color: #636363;
				}
				&.submit{
					border-radius: 0 40rpx 40rpx 0;
					background: #FC3224;
					color: #fff;
				}
			}
		}
	}
</style>